<template>
  <div class="row" id="digitalFlop">
    <div class="col row" v-for="(item, index) in digitalFlopData" :key="index">
      <div class="col-4 text-right" style="line-height: 70px">
        {{ item.title }}
      </div>
      <div class="col-8">
        <dv-digital-flop :config="item.config" style="height: 70px" />
      </div>
    </div>
  </div>
</template>
<script>
import { $$Api } from "@/network/request.js";

export default {
  name: "DigitalFlop",
  data() {
    return {
      digitalFlopData: [],
    };
  },
  methods: {
    createChart() {
      $$Api("/data.json")
        .then((result) => {
          const _digitalFlopData = result.dataV.digitalFlop;
          this.digitalFlopData = new Array();
          _digitalFlopData.forEach((item, index) => {
            this.digitalFlopData.push({
              title: item.title,
              config: {
                number: item.number,
                toFixed: 2,
                textAlign: "center",
                content: "{nt}" + item.unit,
              },
            });
            // console.log(this.digitalFlopData);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.createChart();
  },
  mounted() {
    setInterval(this.createChart, 30000);
  },
};
</script>
<style></style>
